<script setup>
import dayjs from 'dayjs'
import { genFileId } from 'element-plus'
import ChartView from '../chart/index.vue'

const form = reactive({
  model_name: 'neimenggu_3h',
  time_start: dayjs().format('YYYY-MM-DD HH')
})
const bscd = inject('bscd')
const basinList = ref([
  { label: '柳家屯(二)', value: '11200260' }, // 额尔古纳河
  { label: '索伦(五)', value: '11400026' }, // 嫩江中南部
  { label: '大石寨', value: '11400089' }, // 嫩江中南部
  { label: '白云胡硕（四）', value: '11400195' }, // 霍林河内流区
  { label: '巴雅尔吐胡硕', value: '11400241' }, // 霍林河内流区
  { label: '甸子（二）', value: '20106100' }, // 辽河干流水系
  { label: '新井', value: '20115700' }, // 内蒙中部诸河
  { label: '万合永', value: '20208000' }, // 内蒙中部诸河
  { label: '白音他拉', value: '20310500' }, // 辽河干流水系
  { label: '白音卜罗', value: '30100150' }, // 滦河水系
  { label: '大河口（四）', value: '30101900' }, // 滦河水系
  { label: '丰镇（黑三）', value: '30704610' }, // 永定河水系
  { label: '龙头拐（四）', value: '40513605' }, // 黄河干流
  { label: '东园（四）', value: '40515500' } // 黄河干流
])
const modelTypeList = ref([
  { label: '内蒙本地3小时尺度模型', value: 'neimenggu_3h' },
  { label: '内蒙本地日尺度模型', value: 'neimenggu_1D' },
  { label: '公开大样本数据3小时尺度模型', value: 'camels_3h' },
  { label: '公开大样本数据日尺度模型', value: 'camels_1D' },
  { label: '大样本数据与内蒙本地数据3小时尺度模型', value: 'camelsandneimeng_3h' },
  { label: '大样本数据与内蒙本地数据日尺度模型', value: 'camelsandneimeng_1D' }
])
const uploadRef = ref()
function handleExceed(files) {
  uploadRef.value.clearFiles()
  const file = files[0]
  file.uid = genFileId()
  uploadRef.value.handleStart(file)
}
const chartData = ref({
  streamflow: [],
  tp: [],
  time: []
})
const fileList = ref([])
const loading = ref(false)

const handle = async function () {
  if (fileList.value.length === 0) {
    return ElMessage.error('请上传降雨数据')
  }
  const formData = new FormData()
  formData.append('file', fileList.value[0].raw)
  const params = {
    basin_id: bscd.value,
    ...form
  }
  try {
    loading.value = true
    const res = await fetch(`/model_infer_nmg/?${new URLSearchParams(params)}`, {
      method: 'post',
      body: formData
    }).then(res => res.json())
    chartData.value.streamflow = []
    chartData.value.tp = []
    chartData.value.time = []
    res.forEach((e) => {
      chartData.value.streamflow.push(e.streamflow)
      chartData.value.tp.push(e.tp)
      chartData.value.time.push(e.time)
    })
    loading.value = false
  }
  catch {
    loading.value = false
    ElMessage.error('查询失败')
  }
}
const downloadFile = function () {
  const link = document.createElement('a')
  link.href = './demo.csv'
  link.download = 'demo.csv'
  link.click()
}
</script>

<template>
  <div class="flex flex-col h-full px-[8px]">
    <el-form :model="form" label-width="auto">
      <el-form-item label="流域名称">
        <el-select v-model="bscd" class="!w-[220px]">
          <el-option v-for="e in basinList" :key="e.value" :label="e.label" :value="e.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="模型类型">
        <el-select v-model="form.model_name" class="!w-[220px]">
          <el-option v-for="e in modelTypeList" :key="e.value" :label="e.label" :value="e.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="预测开始时间">
        <el-date-picker
          v-model="form.time_start" type="datetime" :clearable="false"
          :value-format="form.model_name.includes('_3h') ? 'YYYY-MM-DD HH' : 'YYYY-MM-DD 00'"
          :format="form.model_name.includes('_3h') ? 'YYYY-MM-DD HH' : 'YYYY-MM-DD 00'"
        />
      </el-form-item>
      <el-form-item label="降雨数据">
        <div class="flex w-[220px]">
          <el-upload
            ref="uploadRef" v-model:file-list="fileList" class="w-[132px]" title="上传文件" :auto-upload="false" multiple accept=".csv"
            :limit="1" :on-exceed="handleExceed"
          >
            <el-button>
              {{ fileList.length ? '更新CSV' : '上传csv' }}
            </el-button>
          </el-upload>
          <el-button @click="downloadFile">
            下载模板
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="handle">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <div class="flex-1 relative">
      <div class="absolute inset-0">
        <ChartView v-loading="loading" :chart-data="chartData" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// .form-btn {
//   display: flex;
//   width: 220px;
//   align-items: start;
//   justify-content: space-between;
// }
</style>
